<template>
  <div id="mdp-box">
    <i-header></i-header>
    <div class="main" :style="{ height: `${height}px` }">
      <div class="menu-box">
        <happy-scroll color="rgba(141, 196, 235, .5)" resize>
          <el-menu :router="true" :unique-opened="true" :default-active="currentPath" >
            <el-submenu :index="index + ''" v-for="(item, index) in menuList" :key="item.id">
              <template slot="title">
                <i class="iconfont" :class="item.obj.iconId" style="padding:0px 10px"></i>
                <span>{{ item.obj.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="val.obj.url || '#'" v-for="val in item.children" :key="val.id" @click.native="updatePath(val.obj.url)">{{ val.obj.name }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </happy-scroll>
      </div>
      <div class="cont-box">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script>
import ajax from '../../api/ajax/ajax'
import api from '../../api/url'
import iHeader from './comm/iHeader/iHeader'
import { mixinParams } from '../../assets/js/mixin1'
export default {
  name: 'iapIndex',
  mixins: [mixinParams],
  components: {
    iHeader
  },
  data () {
    return {
      currentPath: '',
      height: null,
      menuList: []
    }
  },
  methods: {
      // 获取当前系统
      getCurrSystem () {
        ajax.post(api.GO_TO_SYSTEM, { sys_no: 'M203', app_id: 'APP1' }).then(res1 => {
          ajax.post(api.GET_CURR_SYSTEM).then(res2 => {
            ajax.post(api.GETMENU, { sys_no: res2.data }).then(res => {
              this.menuList = res.data
            })
          })
        })
      },
      // 更新路径
      updatePath (url) {
        this.pd_updatePath(url)
      }
  },
  created () {
    this.getCurrSystem()
    this.currentPath = this.$route.path
    this.height = window.innerHeight - 70
    window.onresize = () => {
      this.height = window.innerHeight - 70
    }
  }
}
</script>
<style lang="stylus">
html,body, #app
  height 100%
  background #f5f5f5
  overflow hidden
#mdp-box
  height 100%
  overflow hidden
  .main
    .menu-box
      float left
      height 100%
      width 200px
      background #fff
      box-shadow 0 0 10px rgba(255, 255, 255, 0.5)
      .el-menu
        width 100%!important
        border 0 none
      .happy-scroll-container
        width 200px !important
        .happy-scroll-content
          width 100%
          height 100%
          border 0 none !important
    .cont-box
      height 100%
      margin-left 200px
      overflow auto
</style>
